<template>
  <div class="new">
    <div class="cont">
      <header>
        <p >室内用品展示</p>
      </header>
    </div>

    <!-- 大图片---------- -->

    <div class="cont">
      <div class="head">
        <div>
          <img
            id="zoom_01"
            src="img/bg5.jpg"
            alt="111"
            width="875px"
            height="450px"
            data-zoom-image="img/bg1.jpg"
          />
        </div>
        <div class="head_right">
          <div class="">
            <p>我要上传</p>
            <span>
              <img
                src="../../public/img/QQ.png"
                alt=""
                width="30px"
                height="30px"
              />
            </span>
            <span
              ><img
                src="../../public/img/QQ.png"
                alt=""
                width="30px"
                height="30px"
            /></span>
            <span
              ><img
                src="../../public/img/QQ.png"
                alt=""
                width="30px"
                height="30px"
            /></span>
            <p>目录分类</p>
            <p><input type="checkbox" /> 简约</p>
            <p><input type="checkbox" /> 温馨</p>
            <p><input type="checkbox" /> 高端</p>
            <p><input type="checkbox" /> 定制</p>
          </div>
        </div>
      </div>

      <div class="bod">
        <div class="bod_l">
          <p>生活方式</p>
          <p>新设计师户外用品</p>
          <p>
            Morbi ipsum
            metus，为大门。现在是电视门户开发商，软床和很多胡萝卜。Lacinia
            aliquam augue调味品，由任何一家旅行社提供，来自全国各地。Mauris nec
            magna。在软怀孕，足球还是我的时候，湖家庭作业的大规模发展。Nam
            dignissim箭谁没有问题。没有免赔额的Maecenas vel，euismod magna
            sed，tristique velit urna
            metus。对于日本和巴基斯坦，足球免赔额狮子。
          </p>
          <p>
            谁最大的足球花生软房地产。表演作业足球对此微笑。微波使航空公司担忧。悲痛的玩家现在得到局保留的痛苦不大。最大的拉动是临床上对毛绒生活的仇恨。现在按书签或批量灭菌价格。在唯一方便的时候强调周末。
          </p>
          <p>
            没有免赔额的Maecenas vel，euismod magna sed，tristique velit urna
            metus。对于日本和巴基斯坦，足球免赔额狮子。谁最大的足球花生软房地产。表演作业足球对此微笑。微波使航空公司担忧。悲痛的玩家现在得到局保留的痛苦不大。
          </p>
          <p>科恩·康妮拉（Koan Conella）</p>
        </div>

        <div class="bod_r">
          <div></div>
          <div></div>
        </div>
      </div>

      <p>相关文章</p>

      <div class="bom">
        <div class="bom_l">
          <div>
            <img
              src="../../public/img/bom1.jpg"
              alt=""
              width="270px"
              height="270px"
            />
          </div>
          <div>
            <p>LIFE STYLE</p>
            <p>New Designer Outdoor Items</p>
            <p>
              Phasellus condimentum nulla a arcu lacinia, a venenatis ex congue.
              Mauris nec ante magna.
            </p>
            <p>Adam Smith</p>
          </div>
        </div>
        <div class="bom_r"></div>
      </div>

      <div>
        <footer>
          <p>
            对于日本和巴基斯坦，日本狮子座。表演作业足球对此微笑。微波使航空公司担忧。悲痛的玩家现在得到局保留的痛苦不大。最大的拉动是临床上对毛绒生活的仇恨。现在按书签或批量灭菌价格。在唯一方便的时候强调周末。
          </p>
          <p>
            毛里斯花生酱或室外堵塞。最新拉智人。但是酱汁永远是喉咙。Maecenas eu
            chili有时需要射击。对于孩子们，不仅仅是怀孕的禅宗。现在ullamcorper的温度对此有一定影响。Nullam
            varius facilisis
            aliquam结果。平均利润和财务生活营养锅。Clinical将任何工作室放到娱乐场中。当前的pulvinar坐姿也没有任何元素。
          </p>
        </footer>
      </div>
    </div>

   
  </div>
</template>

<style scoped lang="less" >

* {
  font-family: "Jost", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  list-style: none;
}
.new {
  width: 100%;
}
.cont {
  width: 1200px;
  margin: auto;
}

header {
  margin-top: 50px;
  p {
    font-size: 28px;
    font-weight: 300;
  }
}

.head {
  display: flex;
  justify-content: space-between;

  .head_right {
    width: 270px;

    p:nth-child(1) {
      margin-left: 40px;
      margin-bottom: 10px;
    }
    p:nth-child(5) {
      margin-top: 20px;
      margin-left: 40px;
    }
    p:nth-child(6) {
      margin-top: 10px;
    }

    span {
      margin: 10px;
    }
  }
}

.bod {
  display: flex;
  justify-content: space-between;
  .bod_l {
    width: 870px;
    p:nth-child(1) {
      color: #aaaaaa;
      font-size: 14px;
      margin: 18px 0;
    }
    p:nth-child(2) {
      color: #333333;
      font-size: 28px;
      margin-bottom: 24px;
    }
    p:nth-child(3) {
      color: #666666;
      font-size: 18px;
      margin-bottom: 22px;
    }
    p:nth-child(4) {
      color: #666666;
      font-size: 18px;
      margin-bottom: 32px;
    }
    p:nth-child(5) {
      color: #333333;
      font-size: 16px;
      margin-bottom: 32px;
    }
    p:nth-child(6) {
      color: #222222;
      font-size: 18px;
      margin-bottom: 32px;
    }
  }

  .bod_r {
    width: 270px;
    display: flex;
  }
}

.bom {
  display: flex;
  justify-content: space-between;

  .bom_l {
    display: flex;
    justify-content: space-between;
    width: 870px;

    p {
      margin: 15px 20px;
    }
    p:nth-child(1) {
      color: #aaaaaa;
      font-size: 14px;
    }
    p:nth-child(2) {
      color: #333333;
      font-size: 20px;
    }
    p:nth-child(3) {
      color: #666666;
      font-size: 18px;
    }
  }
}
</style>


 



<script>

export default {
  data() {
    return {};
  },
  methods:{
  

  },
   mounted() {



   },

}
</script>